<template>
  <div class="consulting-start">
    <div class="main">
      <MenuLocation :title="'在线咨询 / 开始咨询 / 立即支付'"></MenuLocation>
      <div class="information">
        <ListInformation :basic="basic"></ListInformation>
        <div class="describe">
          <Title :titles="'问题描述'" :top="50"></Title>
          <div class="describe-content">
            <p class="text">
              {{ infoData.text }}
            </p>
            <div class="describe-img" v-if="infoData.imgList">
              <img
                v-for="(item, index) in infoData.imgList.split(',')"
                :key="index"
                :src="item"
                class="face"
              />
            </div>
          </div>
        </div>
        <PayModal action="online" :currentSnId="currentSnId"></PayModal>
      </div>
    </div>
    <Footer :top="20"></Footer>
    <thirPay></thirPay>
  </div>
</template>
<script>
import bus from '@/libs/bus.js';
import thirPay from '@/components/pay/ThirdPay.vue'//支付弹窗
import Title from "./title.vue";
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import ListInformation from "@/components/myComponents/listInformation.vue";
import PayModal from "@/components/myComponents/payModal.vue";
export default {
  data() {
    return {
      currentSnId:null,//订单id
      basic: [
        { title: "就诊人", value: "" },
        { title: "接诊专家", value: "" },
        { title: "院区场地", value: "" },
        { title: "性别", value: "" },
        { title: "年龄", value: "" },
      ],
      infoData: {},
      // payIsShow: false,
      // payWay: "zfb",
    };
  },
  components: { Title, Footer, MenuLocation, ListInformation, PayModal ,thirPay},
  mounted() {
    this.currentSnId=this.$route.params.id
    // let userInfo = localStorage.getItem("userInfo")
    this.infoData = this.$route.query;
    console.log(JSON.parse(this.infoData.nameObj));
    this.basic[0].value = JSON.parse(this.infoData.nameObj).username;
    this.basic[1].value = this.infoData.docName;
    this.basic[2].value = this.infoData.siteName;
    this.basic[3].value = JSON.parse(this.infoData.nameObj).sex == "1" ? "男" : "女";
    this.basic[4].value = this.getAge(this.infoData.nameObj.birthday);
  },
  methods: {
    // payHandle() {
    //   this.payIsShow = true;
    // },
    // //选择支付方式
    // choosePayHandle(name){
    //     this.payWay = name;
    // },
    // //支付
    // payMoneyHandle(){
    //     console.log('调第三方接口');
    //     this.payIsShow = false;
    // },
    // ok(){
    // },
    // cancel(){
    // }
    getAge(birthYearMonthDay) {
      if (!birthYearMonthDay) return;
      const birthDate = new Date(birthYearMonthDay);
      const momentDate = new Date();
      momentDate.setHours(0, 0, 0, 0);
      const thisYearBirthDate = new Date(
        momentDate.getFullYear(),
        birthDate.getMonth(),
        birthDate.getDate()
      );
      const aDate = thisYearBirthDate - birthDate;
      const bDate = momentDate - birthDate;
      let tempAge = momentDate.getFullYear() - birthDate.getFullYear();
      let age = null;
      if (bDate < aDate) {
        tempAge = tempAge - 1;
        age = tempAge < 0 ? 0 : tempAge;
      } else {
        age = tempAge;
      }
      return age;
    },
  },
};
</script>

<style lang="scss" scoped>
.consulting-start {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    .menu-location {
      height: calc(54 / 1920 * 100vw);
      display: flex;
      align-items: center;
      > img {
        width: calc(11 / 1920 * 100vw);
        height: calc(14 / 1920 * 100vw);
        margin-top: calc(-2 / 1920 * 100vw);
      }
      > span {
        margin-left: calc(11 / 1920 * 100vw);
      }
    }
    .information {
      background: #fff;
      padding: calc(30 / 1920 * 100vw) calc(20 / 1920 * 100vw)
        calc(70 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      display: flex;
      flex-direction: column;
      .describe {
        .describe-content {
          .text {
            text-indent: 2em;
            margin-top: calc(26 / 1920 * 100vw);
            font-size: calc(16 / 1920 * 100vw);
          }
          .describe-img {
            margin-top: calc(43 / 1920 * 100vw);
            padding-left: calc(10 / 1920 * 100vw);
            .face {
              width: calc(128 / 1920 * 100vw);
              height: calc(128 / 1920 * 100vw);
              /*border: 1px solid red;*/
              border-radius: calc(4 / 1920 * 100vw);
              margin-right: 3px;
            }
          }
        }
      }
    }
  }
}
</style>
